<md-content ng-controller="AppCtrl as ctrl" layout-padding ng-cloak>
  <div layout-gt-xs="row">
    <div flex-gt-xs>
      <h4 id="datepicker-header">Standard date-picker</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"
                     input-aria-describedby="datepicker-description"
                     input-aria-labelledby="datepicker-header "></md-datepicker>
      <p style="display: none" id="datepicker-description">
        You can use input-aria-describedby to have screen readers provide a more detailed
        description of a datepicker or its interactions.
      </p>
    </div>

    <div flex-gt-xs>
      <h4>Disabled date-picker</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" disabled></md-datepicker>
    </div>
  </div>

  <div layout-gt-xs="row">
    <div flex-gt-xs>
      <h4>Opening the calendar when the input is focused</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-open-on-focus></md-datepicker>
    </div>

    <div flex-gt-xs>
      <h4>Date-picker that goes straight to the year view</h4>
      <md-datepicker ng-model="ctrl.myDate" md-current-view="year" md-placeholder="Enter date"></md-datepicker>
    </div>
  </div>

  <div layout-gt-xs="row">
    <div flex-gt-xs>
      <h4>Custom calendar trigger</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-is-open="ctrl.isOpen"></md-datepicker>
      <md-button class="md-primary md-raised" ng-click="ctrl.isOpen = true">Open</md-button>
    </div>

    <div flex-gt-xs>
      <h4>Date-picker that only allows for the month to be selected</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-mode="month"></md-datepicker>
    </div>
  </div>
</md-content>
